<template>
	<view class="page_view">
		<view class="zhanwei"></view>
		<view class="card1 flex">
			<view class="card1_left flex1">
				<image :src="ImgUrl + dataList.avatar" class="card1_left_img" mode=""></image>
				<view class="card1_left_right">
					<view class="card1_left_right_top">
						{{dataList?dataList.name:''}} <text
							class="card1_left_right_top_desc">{{dataList.level.name}}</text>
					</view>
					<view class="card1_left_right_bottom">
						{{dataList.hospital?dataList.hospital.name:''}}
					</view>
				</view>
			</view>
			<view class="card1_right" @click="guanzhu(dataList.id)">
				{{dataList.is_follow == 0?'关注':'已关注'}}
			</view>
		</view>
		<view class="jieshao">
			<view class="jieshao_title">
				医师介绍
			</view>
			<view class="jieshao_desc">
				{{dataList.desc != null?dataList.desc:'暂无'}}
			</view>
		</view>
		<view class="jieshao">
			<view class="jieshao_title">
				职业经历
			</view>
			<view :class="['jieshao_desc',isshowqi?'shouqi':'']">
				<view class="" v-for="(items,indexs) in dataList.resume">
					{{items.desc}}
				</view>
			</view>
			<view class="zhankai" @click="isshowqi_click">
				{{isshowqi?'展开':'收起'}}
			</view>
		</view>
		<view class="pingjia">
			<view class="pingjia_top flex">
				<view class="pingjia_left flex1">
					患者评价
				</view>
				<view class="pingjia_right flex1">
					<view class="pingjia_right_text">
						好评度{{dataList.good_rate}}%
					</view>
					<u-icon name="arrow-right" color="#000000" size="11"></u-icon>
				</view>
			</view>
			<!-- <view class="pingjia_label flex1">
				<view v-for="(item,index) in dataList." class="pingjia_label_item">
					发货快
				</view>
			</view> -->
			<view class="user_pl" v-for="(item,index) in dataList.comment" :key="index">
				<view class="user_pl_user">
					<image class="user_pl_user_img" :src="item.avatar" mode=""></image>
					<view class="user_pl_pl">
						<view class="user_pl_name">{{item.user.name}}</view>
						<u-rate size="10" inactiveColor="#626262" :readonly="true" gutter="2" activeColor="#DD504A"
							:count="count" v-model="item.star"></u-rate>
					</view>
				</view>
				<view class="pl_text">
					{{item.content}}
				</view>
				<view class="pingjia_img flex1">
					<image :src="ImgUrl + item.img" class="pingjia_img_item" mode=""></image>
				</view>
			</view>
		</view>
		<view class="jieshao">
			<view class="jieshao_title">
				资费介绍
			</view>
			<view class="zifei_list flex">
				<view class="zifei_list_item">
					图文问诊/￥{{dataList.tag1_price}}
				</view>
				<view class="zifei_list_item">
					视频问诊/￥{{dataList.tag2_price}}
				</view>
				<view class="zifei_list_item">
					飞刀问诊/￥{{dataList.tag3_price}}
				</view>
				<view class="zifei_list_item">
					多人问诊/￥{{dataList.tag4_price}}
				</view>
			</view>
		</view>
		<template v-if="dataList.diy_status==2&&dataList.diy_use_status==1">
			<view class="jieshao">
				<view class="jieshao_title">
					医师描述
				</view>
				<view class="zifei_list flex">
					{{dataList.diy.desc}}
				</view>
			</view>
			<view class="jieshao">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="jieshao_title">
						医师网站
					</view>
					<view class="" style="padding-right: 30rpx;text-decoration:underline;color: blue;font-size: 24rpx;" @click="copy(dataList.diy.links)">
						复制
					</view>
				</view>
				<view class="zifei_list flex" style="word-break: break-all;">
					{{dataList.diy.links}}
				</view>
			</view>
			<view class="jieshao">
				<view class="jieshao_title">
					医师详情
				</view>
				<view class="zifei_list flex" v-for="(item,index) in JSON.parse(dataList.diy.imgs)" style="font-size: 0;">
					<image :src="ImgUrl+item" style="width: 100%;" mode="widthFix"></image>
				</view>
				<view v-html="dataList.diy.content" class="zifei_list flex" style="word-break: break-all;">
					
				</view>
			</view>
			<view class="jieshao">
				<view class="jieshao_title">
					医师视频
				</view>
				<view class="zifei_list flex" v-for="(item,index) in JSON.parse(dataList.diy.videos)" style="word-break: break-all;">
					<video style="width: 100%;" :src="ImgUrl+item"></video>
				</view>
			</view>
		</template>
		<view class="bottom flex">
			<view class="bottom_btn btn_left" @click="songli">
				送礼物
			</view>
			<view class="bottom_btn btn_right" @click="go_doctor">
				问医生
			</view>
		</view>
		<u-popup :show="gift_show" :safeAreaInsetBottom="false" :closeable="true" @close="close"
			closeIconPos="top-right" @open="open" round="14" mode="center">
			<view class="gift_tc">
				<view class="gift_tc_zhanwei"></view>
				<view class="gift_tc_item flex" v-for="(item,index) in gifList" :key="index">
					<view class="gift_tc_item_left flex1">
						<image :src="ImgUrl+item.icon" class="gift_tc_item_left_icon" mode=""></image>
						<view class="gift_tc_item_left_right">
							{{item.name}}
						</view>
					</view>
					<u-number-box :min="1" v-model="item.huanum" @change="changeGitfsNum" class="number-box">
						<view slot="minus" class="minus">
							<u-icon name="minus" size="22rpx" class="minus_icon" color="#C0C0C0"></u-icon>
						</view>
						<text slot="input" style="
								width: 13px;
								text-align: center;
								border-bottom: 1px solid #eeeeee;
								border-top: 1px solid #eeeeee;
								height: 42rpx;
								line-height: 42rpx;
								font-size: 22rpx;
							" class="input">
							{{ item.huanum}}
						</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#C0C0C0" size="12" class="plus_icon"></u-icon>
						</view>
					</u-number-box>
				</view>

				<view class="gift_tc_bottom flex">
					<view class="bottom_item gift_tc_btn_left" @click="sendDoc">
						赠送
					</view>
					<view class="bottom_item gift_tc_btn_right" @click="close">
						取消
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="fq_show" :safeAreaInsetBottom="false" :closeable="true" @close="fq_close"
			closeIconPos="top-right" @open="fq_open" round="14" mode="center">
			<view class="fq_tc">
				<view class="fq_tc_title">
					选择咨询项目
				</view>
				<view class="fq_zhanweo"></view>
				<view :class="['fq_tc_item',fq_tc_list_index == index?'fq_tc_item_active':'']"
					v-for="(item,index) in fq_tc_list" @click="choose_fq(index)">
					{{item.name+'/¥'+item.price}}
				</view>
				<view class="fq_tc_btn" @click="go_ReservationInformation">
					下一步
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		detail
	} from '../../api/login.js';
	import {
		doctorHandle,
		send,
		gifts,
		pays
	} from '../../api/common.js';
	export default {
		data() {
			return {
				dataList: {},
				id: '',
				isshowqi: true,
				count: 5,
				gift_show: false,
				huanum: 1,
				qizinum: 1,
				fq_show: false,
				fq_tc_list: [{
						name: '图文问诊',
						price: 100,
					},
					{
						name: '视频问诊',
						price: 100,
					},
					{
						name: '飞刀问诊',
						price: 100,
					},
					{
						name: '多人问诊',
						price: 100,
					}
				],
				fq_tc_list_index: 0,
				gifList: [],
				selectedGifts: [],
				diy:'',
				status1:0,
				status2:0,
			}
		},
		computed: {
			ImgUrl() {
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		onLoad(option) {
			this.id = option.id;
			this.getDetail(option.id);
			this.getGifts();
		},
		methods: {
			copy(e){
				uni.setClipboardData({
					data:e,
				})
			},
			changeGitfsNum(e) {
				this.$forceUpdate();
			},
			getGifts() {
				gifts().then(res => {
					if (res.code == 200001) {
						this.gifList = res.data;
						this.gifList.map(item => {
							item.huanum = 1;
						});
					}
				})
			},
			sendDoc() {

				let arr = [];
				this.selectedGifts = this.gifList.filter(item => item.huanum > 0);
				this.selectedGifts.map(item => {
					arr.push({
						id: item.id,
						number: item.huanum,
						doctor_id: Number(this.dataList.user_id)
					});
				});
				send({
					data: arr,
					isArray: 1
				}).then(res => {
					if (res.code == 200001) {
						// uni.showToast({
						// 	title: '赠送成功',
						// 	icon: 'none'
						// })
						// console.log(res.data.order_sn,'123');
						pays({
							type: 4,
							order_sn: res.data.order_sn,
							channel: 2
						}).then(res => {
							console.log(res, '123')
							// uni.showToast({
							// 	title: '支付成功',
							// 	icon: 'none'
							// })
							// setTimeout(() => {
							// 	uni.navigateBack({
							// 		delta: 1
							// 	})
							// }, 800)
							let obj = res.data.payInfo;
							uni.requestPayment({
								provider: 'wxpay',
								...obj,
								// timeStamp: obj.timeStamp,
								// nonceStr: obj.nonceStr,
								// package: obj.package,
								// signType: obj.signType,
								// paySign: obj.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
								},
								fail: function(err) {
									// console.log('fail:' + JSON.stringify(err));
									uni.showToast({
										title: '取消支付',
										icon: 'none'
									})
								}
							});
							return;
							uni.request({
								url: res.data, //仅为示例，并非真实接口地址。
								method: 'POST',
								// data: {
								//     // text: 'uni.request'
								// },
								// header: {
								//     'custom-header': 'hello' //自定义请求头信息
								// },
								success: (res2) => {
									console.log(res2, 'cs');
									uni.showModal({
										title: '提示',
										content: JSON.stringify(res2.data)
									})
								}
							});
						})
						this.close();
					}
				})
			},
			guanzhu(id) {
				doctorHandle({
					id: id
				}).then(res => {
					if (res.code == 200001) {
						let title = this.dataList.is_follow == 0 ? '关注成功' : '取消关注';
						uni.showToast({
							title,
							icon: 'none'
						})
						this.getDetail(id);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			getDetail(id) {
				let params = {
					id: id
				}
				detail(params).then(res => {
					if (res.code === 200001) {
						this.dataList = res.data;
						this.fq_tc_list[0].price = this.dataList.tag1_price;
						this.fq_tc_list[1].price = this.dataList.tag2_price;
						this.fq_tc_list[2].price = this.dataList.tag3_price;
						this.fq_tc_list[3].price = this.dataList.tag4_price;
						this.$forceUpdate();
					}
				}).catch(err => {
					console.log(err)
				})
			},
			isshowqi_click() {
				this.isshowqi = !this.isshowqi
			},
			close() {
				this.gift_show = false
			},
			open() {
				this.gift_show = true
			},
			fq_close() {
				this.fq_show = false
			},
			fq_open() {
				this.fq_show = true
			},
			choose_fq(index) {
				this.fq_tc_list_index = index
			},
			songli() {
				this.open()
			},
			go_doctor() {
				this.fq_open()
			},
			// 预约
			go_ReservationInformation() {
				uni.navigateTo({
					url: '/pages/ReservationInformation/ReservationInformation?type=' + this.fq_tc_list_index +
						'&data=' + JSON.stringify(this.dataList)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F4F4F4;
		padding-bottom: 200rpx;
	}

	.zhanwei {
		width: 100%;
		height: 20rpx;
	}

	.page_view {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.card1 {
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
	}

	.card1_right {
		display: inline-flex;
		padding: 10rpx 20rpx;
		border-radius: 130rpx;
		background: #0165FB;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.card1_left_img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 12rpx;
		background: #D9D9D9;
	}

	.card1_left_right {
		margin-left: 20rpx;
	}

	.card1_left_right_top {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
	}

	.card1_left_right_top_desc {
		color: #444;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		margin-left: 4rpx;
	}

	.card1_left_right_bottom {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		margin-top: 14rpx;
	}

	.jieshao {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.jieshao_title {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpa;
		font-weight: 700;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F4F4F4;
	}

	.jieshao_desc {
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.shouqi {
		max-height: 180rpx;
		overflow: hidden;
	}

	.zhankai {
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
	}

	.pingjia {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background: #fff;
		margin-top: 30rpx;
	}

	.pingjia_left {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 700;
	}

	.pingjia_left_img {
		width: 48rpx;
		height: 48rpx;
	}

	.pingjia_left_text {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		height: 48rpx;
		line-height: 48rpx;
		margin-left: 20rpx;
	}

	.pingjia_right_text {
		color: #999;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-right: 8rpx;
	}

	.pingjia_label {
		margin-top: 20rpx;
	}

	.pingjia_label_item {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		display: inline-block;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin-right: 30rpx;
		background: #EDEDED;
		border-radius: 64rpx;
	}

	.user_pl {
		margin-top: 30rpx;
	}

	.user_pl_user {
		display: flex;
		align-items: center;
	}

	.user_pl_user_img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #333;
	}

	.user_pl_name {
		color: var(--unnamed, #626262);
		font-family: Alibaba PuHuiTi 2;
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.user_pl_pl {
		margin-left: 20rpx;
	}

	.pl_text {
		margin-top: 24rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.pingjia_img {
		margin-top: 20rpx;
	}

	.pingjia_img_item {
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background: #ccc;
		margin-right: 8rpx;
	}

	.zifei_list {
		flex-wrap: wrap;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
	}

	.zifei_list_item {
		width: 306rpx;
		/* height: 80rpx; */
		text-align: center;
		line-height: 80rpx;
		border-radius: 12rpx;
		border: 1rpx solid #E8E8E8;
		margin-top: 20rpx;

	}

	.bottom {
		width: 100%;
		height: 180rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		background: #F4F4F4;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.bottom_btn {
		width: 330rpx;
		height: 78rpx;
		text-align: center;
		line-height: 78rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 30rpx;
		font-weight: 400;
		border-radius: 68rpx;
		margin-top: -30rpx;
	}

	.btn_left {
		background: #FF9D43;
	}

	.btn_right {
		background: #0165FB;
	}

	.gift_tc {
		width: 478rpx;
		height: 440rpx;
		background: #fff;
		border-radius: 28rpx;
	}

	.gift_tc_item {
		padding: 0 58rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}

	.gift_tc_item_left {
		justify-content: flex-end;
		width: 140rpx;
	}

	.gift_tc_item_left_icon {
		width: 38rpx;
		height: 42rpx;
	}

	.gift_tc_item_left_right {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 16rpx;
	}

	.minus {
		width: 42rpx;
		height: 42rpx;
		border-width: 1px;
		border-color: #eeeeee;
		border-style: solid;
		display: flex;
		align-items: center;
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.minus_icon {
		margin: 0 auto;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 42rpx;
		height: 42rpx;
		border-width: 1px;
		border-color: #eeeeee;
		border-style: solid;
		display: flex;
		align-items: center;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.u-icon {
		margin: 0 auto !important;
	}

	.gift_tc_zhanwei {
		width: 100%;
		height: 82rpx;
	}

	.bottom_item {
		width: 156rpx;
		height: 68rpx;
		border-radius: 16rpx;
		line-height: 68rpx;
		text-align: center;
		ont-size: 28rpx;
		font-weight: 700;
	}

	.gift_tc_btn_left {
		background: #0165FB;
		color: #FFF;
	}

	.gift_tc_btn_right {
		border: 1rpx solid #D9D9D9;
		color: #0165FB;
	}

	.gift_tc_bottom {
		padding: 0 58rpx;
		box-sizing: border-box;
		margin-top: 70rpx;
	}

	.fq_tc {
		width: 478rpx;
		height: auto;
		padding: 50rpx 88rpx;
		box-sizing: border-box;
	}

	.fq_tc_title {
		color: #333;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
	}

	.fq_tc_item {
		width: 306rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 12rpx;
		background: #F9F9F9;
		color: #666;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}

	.fq_zhanweo {
		height: 16rpx;
		width: 100%;
	}

	.fq_tc_btn {
		width: 198rpx;
		height: 68rpx;
		border-radius: 16rpx;
		background: #0165FB;
		text-align: center;
		line-height: 68rpx;
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 700;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.fq_tc_item_active {
		background: #0165FB;
		color: #FFF;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}
</style>